<template>
	<view class="private-friends-list-main">
		<view class="cancel-title">
			<view class="cancel-text" @click="cancelHandler">
				取消
			</view>
			<view class="share-title">
				分享至
			</view>
		</view>

		<!-- 搜索 -->
		<view class="search-view">
			<uni-search-bar @confirm="searchFriends" @clear="clearHandler" v-model="searchValue"></uni-search-bar>
		</view>

		<!-- 互相关注 -->
		<view class="mutual-attention" v-if="newMutualAttentions.length > 0">
			<view class="mutual-attention-text">
				互相关注
			</view>
			<view class="mutual-attention-main">
				<view class="mutual-attention-item" v-for="(item,index) in newMutualAttentions" :key="index">
					<view class="mutual-attention-item-main">
						<view class="radio-view">
							<label class="radio">
								<radio :checked="item.isChecked" active-background-color="#66596b"
									@click="changeRadioState(item)" />
							</label>
						</view>
						<view class="user-view" @click="changeRadioState(item)">
							<view class="user-avatar">
								<image :src="item.userAvatar" mode="aspectFill"></image>
								<span class="green-dot" v-if="item.isOnline"></span>
							</view>
							<view class="user-name">
								{{item.userName}}
							</view>
						</view>
					</view>
					<DividerLine :width="100" />
				</view>
			</view>
		</view>

		<!-- 全部关注 -->
		<view class="mutual-attention" v-if="newAllAttentions.length > 0">
			<view class="mutual-attention-text">
				全部关注
			</view>
			<view class="mutual-attention-main">
				<view class="mutual-attention-item" v-for="(item,index) in newAllAttentions" :key="index">
					<view class="mutual-attention-item-main">
						<view class="radio-view">
							<label class="radio">
								<radio :checked="item.isChecked" active-background-color="#66596b"
									@click="changeRadioState(item)" />
							</label>
						</view>
						<view class="user-view" @click="changeRadioState(item)">
							<view class="user-avatar">
								<image :src="item.userAvatar" mode="aspectFill"></image>
								<span class="green-dot" v-if="item.isOnline"></span>
							</view>
							<view class="user-name">
								{{item.userName}}
							</view>
						</view>
					</view>
					<DividerLine :width="100" />
				</view>
			</view>
		</view>

		<!-- 底部显示的发送按钮和输入框 -->
		<view class="bottom-btn-input" v-show="bottomViewShow">
			<view class="send-to-people">
				<view class="send-to-people-text">
					发送给：
				</view>
				<view class="send-to-people-main">
					<view class="send-to-people-item" v-for="(item,index) in selectFriends">
						<image :src="item.userAvatar" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<divider-line></divider-line>
			<!-- 输入框 -->
			<view class="send-message-input">
				<view class="textarea-view">
					<textarea :value="inputText" fixed="true" placeholder="跟朋友说点什么吧..." />
				</view>
				<view class="show-content">
					<image :src="transData.image" mode="aspectFill" @click="previewImage"></image>
				</view>
			</view>

			<!-- 发送按钮 -->
			<view class="send-btn" @click="sendToFriend">
				<button type="default">{{bottomSendBtnText}}</button>
			</view>
		</view>


	</view>
</template>

<script>
	import DividerLine from '@/components/common-components/DividerLine.vue'
	export default {
		components: {
			DividerLine,
		},
		data() {
			return {
				transData: {
					image: 'https://img1.baidu.com/it/u=1269413863,2798972150&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380'
				},
				inputText: '',
				searchValue: '',
				allAttentions: [{
						userAid: 1,
						userName: '快乐小鸟',
						isOnline: false,
						isChecked: false,
						userAvatar: 'https://img2.baidu.com/it/u=2582039980,769195691&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889'
					},
					{
						userAid: 2,
						userName: '智慧精灵',
						isOnline: true,
						isChecked: false,
						userAvatar: 'https://img1.baidu.com/it/u=1423197334,186448263&fm=253&fmt=auto&app=138&f=JPEG?w=491&h=492'
					},
					{
						userAid: 3,
						userName: '勇敢小熊',
						isOnline: false,
						isChecked: false,
						userAvatar: 'http://img.duoziwang.com/2018/17/05251620906834.jpg'
					},
					{
						userAid: 4,
						userName: '可爱花猫',
						isOnline: true,
						isChecked: false,
						userAvatar: 'https://up.enterdesk.com/edpic/42/88/a7/4288a74cd8ba2ad6e3c5391b95478c72.jpg'
					},
					{
						userAid: 5,
						userName: '文静小兔',
						isOnline: false,
						isChecked: false,
						userAvatar: 'https://img0.baidu.com/it/u=3319905458,1546026183&fm=253&fmt=auto&app=138&f=JPEG?w=420&h=420'
					},
					{
						userAid: 6,
						userName: '调皮猴子',
						isOnline: true,
						isChecked: false,
						userAvatar: 'https://up.enterdesk.com/edpic/d4/a0/14/d4a014f61c21563b36d046fce1464bea.jpg'
					},
					{
						userAid: 7,
						userName: '优雅天鹅',
						isOnline: false,
						isChecked: false,
						userAvatar: 'https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=3298099e8cb1cb133e3c3415ed647a76/b7003af33a87e950331a911d11385343fbf2b4b5.jpg'
					},
					{
						userAid: 8,
						userName: '帅气骏马',
						isOnline: true,
						isChecked: false,
						userAvatar: 'https://img2.woyaogexing.com/2021/04/05/971e6f8750114144849f070278ccebb3%21400x400.jpeg'
					},
					{
						userAid: 9,
						userName: '善良小羊',
						isOnline: false,
						isChecked: false,
						userAvatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F21%2F20171021102638_WEYPj.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736661781&t=d61e9880f7b2e7a2018942e613d21a1f'
					},
					{
						userAid: 10,
						userName: '勤劳蜜蜂',
						isOnline: true,
						isChecked: false,
						userAvatar: 'http://img2.baidu.com/it/u=76242595,2058857716&fm=253&app=138&f=JPEG?w=800&h=801'
					}
				],
				mutualAttentions: [{
						userAid: 1,
						userName: '小猫爱吃鱼',
						isOnline: false, // 是否在线
						isChecked: false, // 是否勾选
						userAvatar: 'https://img1.baidu.com/it/u=1559238338,753924035&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
					},
					{
						userAid: 2,
						userName: '姐就是女王',
						isOnline: true, // 是否在线
						isChecked: false, // 是否勾选
						userAvatar: 'https://img2.baidu.com/it/u=2605674133,3786150701&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
					},
					{
						userAid: 3,
						userName: '优雅永不过时',
						isOnline: false, // 是否在线
						isChecked: false, // 是否勾选
						userAvatar: 'https://img1.baidu.com/it/u=1269413863,2798972150&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
					},
				],
				newMutualAttentions: [], // 负责展示的数据
				newAllAttentions: [], // 负责展示的数据
				selectFriends: [], // 勾选的朋友
				bottomViewShow: false, // 底部的按钮，输入框等是否显示
				bottomSendBtnText: '发送',
			};
		},

		onLoad() {
			this.newMutualAttentions = this.mutualAttentions;
			this.newAllAttentions = this.allAttentions;
		},

		methods: {
			cancelHandler() {
				uni.navigateBack()
			},

			clearHandler() {
				// 如果搜索关键词为空字符串，直接使用备份的原始数据还原展示
				this.newMutualAttentions = this.mutualAttentions;
				this.newAllAttentions = this.allAttentions;
			},

			// 搜索框输入搜索朋友
			searchFriends() {
				const searchValue = this.searchValue.trim();

				this.newAllAttentions = [];
				this.newMutualAttentions = [];

				if (searchValue === "") {
					// 如果搜索关键词为空字符串，直接使用备份的原始数据还原展示
					this.newMutualAttentions = this.mutualAttentions;
					this.newAllAttentions = this.allAttentions;
				} else {
					const allAttentionsCombined = [...this.allAttentions, ...this.mutualAttentions];
					allAttentionsCombined.forEach(item => {
						if (item.userName.includes(searchValue)) {
							if (this.newMutualAttentions.find(mutualItem => mutualItem.userAid === item.userAid)) {
								this.newMutualAttentions.push(item);
							} else {
								this.newAllAttentions.push(item);
							}
						}
					});
				}
			},

			// 点击radio，改变勾选状态
			changeRadioState(item) {
				item.isChecked = !item.isChecked;
				// 重置选中朋友列表及勾选计数
				this.selectFriends = [];
				let checkedCount = 0;

				// 合并mutualAttentions和allAttentions数组，方便统一处理
				const allAttentionsCombined = [...this.mutualAttentions, ...this.allAttentions];

				// 遍历合并后的数组
				allAttentionsCombined.forEach(obj => {
					if (obj.isChecked) {
						checkedCount++;
						// 仅添加未在selectFriends数组中的对象
						if (!this.selectFriends.some(selectedObj => selectedObj.userName === obj.userName)) {
							this.selectFriends.push(obj);
						}
					}
				});

				// 根据勾选数量更新底部按钮相关状态
				if (checkedCount > 1) {
					this.bottomViewShow = true;
					this.bottomSendBtnText = '分别发送';
				} else if (checkedCount === 1) {
					this.bottomViewShow = true;
					this.bottomSendBtnText = '发送';
				} else {
					this.bottomViewShow = false;
				}
			},

			previewImage() {
				uni.previewImage({
					urls: [this.transData.image], // 将当前要预览的图片链接放入数组中，这里假设只预览这一张图片，如果有多个图片可以按顺序放入数组
					current: this.transData.image // 设置当前显示的图片，这里就是要预览的这张图片
				});
			},

			// 发送给朋友（如果多选就分别发送）
			sendToFriend() {
				// 相当于给对方发送一条消息，带图片和文字的链接，点击可以直接跳转到指定页面的


				// 发送成功之后关闭此页面，显示发送成功提示
				uni.showToast({
					title: '分享成功！',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},

		},
	};
</script>

<style lang="scss" scoped>
	.private-friends-list-main {
		min-height: 50vh;
		padding-top: 60rpx;
		padding-bottom: 600rpx;
		background-color: #ffffff;
		overflow-y: scroll;

		.cancel-title {
			text-align: center;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			position: relative;

			.cancel-text {
				position: absolute;
				font-size: 36rpx;
			}

			.share-title {
				font-size: 32rpx;
			}
		}

		.search-view {
			margin-top: 30rpx;
		}

		.mutual-attention {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30rpx;
			margin-bottom: 40rpx;

			.mutual-attention-text {
				font-size: 26rpx;
				color: #838383;
				letter-spacing: 2rpx;
			}

			.mutual-attention-main {
				margin-top: 30rpx;

				.mutual-attention-item {

					.mutual-attention-item-main {
						display: flex;
						flex-direction: row;
						align-items: center;

						.user-view {
							display: flex;
							margin-left: 30rpx;

							.user-avatar {
								position: relative;

								image {
									width: 100rpx;
									height: 100rpx;
									border-radius: 50%;
								}

								.green-dot {
									width: 25rpx;
									height: 25rpx;
									border-radius: 50%;
									background-color: springgreen;
									position: absolute;
									bottom: 5rpx;
									right: 5rpx;
								}
							}

							.user-name {
								margin-left: 20rpx;
								display: flex;
								align-items: center;
							}
						}
					}


				}
			}
		}

		.all-attention-list {
			margin-top: 60rpx;
			width: 90%;
			margin-left: auto;
			margin-right: auto;

			.all-attention-list-text {
				font-size: 26rpx;
				color: #838383;
				letter-spacing: 2rpx;
			}
		}

		.bottom-btn-input {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 500rpx;
			background-color: #ffffff;
			border-radius: 20rpx 20rpx 0 0;

			.send-to-people {
				padding-left: 40rpx;
				padding-top: 30rpx;
				display: flex;
				align-items: center;

				.send-to-people-text {
					width: 15%;
					font-size: 26rpx;
					color: #838383;
				}

				/* 隐藏水平滚动条（仅WebKit内核浏览器有效） */
				.send-to-people-main::-webkit-scrollbar {
					display: none;
				}

				.send-to-people-main {
					width: 85%;
					display: flex;
					/* 让内部文本等内容不换行，便于测试滚动效果 */
					white-space: nowrap;
					overflow-x: scroll;

					.send-to-people-item {
						margin-left: 20rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}
				}
			}

			.send-message-input {
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.show-content {

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}

				.textarea-view {
					height: 200rpx;
					width: 500rpx;

					textarea {
						height: 200rpx;
						width: 500rpx;
					}
				}
			}

			.send-btn {
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 30rpx;

				button {
					background-color: #66596b;
					color: #fff;
					border-radius: 10rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>